<template>
  <el-aside style="width:96px;">
    <ul class="border--radius">
      <li class="classNow__aside__list__head class__aside__li">
        {{ classNow.name }}
      </li>
      <li class="class__aside__li">
        <div
          :class="
            mapId === 0
              ? 'classNow__aside__list--active'
              : 'classNow__aside__list--normal'
          "
          @click="jump(0)"
        >
          全部
        </div>
      </li>
      <li
        v-for="(item, index) in classNow.map"
        :key="index"
        class="class__aside__li"
      >
        <div
          :class="
            mapId === item.id
              ? 'classNow__aside__list--active'
              : 'classNow__aside__list--normal'
          "
          @click="jump(item.id)"
        >
          {{ item.name }}
        </div>
      </li>
    </ul>
  </el-aside>
</template>

<script>
export default {
  props: {
    classNow: {
      type: Object,
      default: () => {
        return {}
      }
    },
    mapId: {
      type: Number,
      default: 0
    }
  },
  methods: {
    jump(id) {
      this.$emit('changeClass', id)
    }
  }
}
</script>

<style lang="scss" scoped>
$height: 32px;
.el-aside {
  margin: 0px 12px 0 0;
  padding: 6px 0px;
}
ul {
  padding: 6px 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.class__aside__li {
  margin-bottom: 1px;
  height: $height;
  width: 100%;
  line-height: $height;
  &:last-child {
    margin-bottom: 0px;
  }
}
.classNow__aside__list__head {
  height: 100%;
  width: 100%;
  @include font(14px, bold);
  @include flexCenter;
  &:hover {
    background: #fff;
  }
}
.classNow__aside__list--normal {
  cursor: pointer;
  @include font($color: #333, $align: center);
  &:hover {
    background: $--color-primary;
    @include font($color: #fff, $align: center);
  }
}
.classNow__aside__list--active {
  background: $--color-primary;
  @include font($color: #fff, $align: center);
}
/deep/ .el-divider {
  margin: 4px 0;
}
</style>
